<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>依琳-管理系统</title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/Yiling/css/Yiling.css">
</head>
<style>
    /* .layui-table-col-special .layui-table-cell {
		height:auto;
		overflow:visible;
		text-overflow:inherit;
		white-space: normal;
	} */
 
    a:hover{
        color:#fff;
    }
    .Barmore{position: relative;}
    .Yiling-a-xs{font-size: 12px;color: #ffffff;text-decoration: none;padding: 2px 5px;border-radius: 5px;}
    .Yiling-1ab394{background-color: #1ab394;}
</style>
<body>
    <div class="layui-fluid" >
       <div class="Yiling-white Yiling-top">
           <form class="layui-form">
                <ul>
                    <li class="Yiling-paddingLi" >
                        <span>登录账号:</span> <input type="text" name="loginname"  placeholder="请输入登录账号" autocomplete="off" class="layui-input Yiling-width200">
                    </li>
                    <li class="Yiling-paddingLi ">
                        <button type="button" lay-submit lay-filter="FormSearch" class="layui-btn layui-btn-sm layui-btn-radius"><i class=" layui-icon layui-icon-search" style="font-size:14px"></i>搜索</button>
                        <button type="button" id="CloseSubmit" class="layui-btn layui-btn-sm layui-btn-radius  layui-btn-warm"><i class=" layui-icon layui-icon-refresh-3" style="font-size:14px"></i>重置</button>
                    </li>
                </ul>
            </form>
       </div>
    </div>
    <div class="layui-fluid">
        <div class="Yiling-white Yiling-top">
            <table id="Yiling-table" lay-filter="Yiling-table"></table>
        </div>
    </div>
    
</body>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm Yliing-blue"  lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>添加用户</button>
    <button class="layui-btn layui-btn-sm Yiling-cyan" lay-event="AuthAll"> <i class="layui-icon layui-icon-edit"></i>批量取消授权</button>
    <button class="layui-btn layui-btn-sm Yiling-cyan" lay-event="Close"> <i class="layui-icon layui-icon-edit"></i>关闭</button>
  </div> 
</script>

<!-- 操作 -->
<!-- <script type="text/html" id="BarOper">
    <div class="Barmore">
        <div class="Cover">
           1
        </div>
        <button class="layui-btn layui-btn-xs Yliing-blue" lay-event="tooledit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
        <button class="layui-btn layui-btn-xs ruoling-request-Red" lay-event="tooldel"><i class="layui-icon layui-icon-close"></i>删除</button>
        <button class="layui-btn layui-btn-xs ruoling-request-cyanBlue" lay-event="toolMore" ><i class="layui-icon layui-icon-right"></i>更多操作</button>
    </div>
</script> -->

</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
    base:""
}).extend({
    Yiling:"/Yiling/js/Yiling-Request"
}).use(["table","layer","jquery","form",'Yiling'],function(){
    let table = layui.table;
    let layer = layui.layer;
    let $ = layui.jquery;
    let form = layui.form;
    let YI_Ajax = layui.Yiling.YI_Ajax;
 
    let TID = location.search.substr(1, location.search.length).split('=')[1]

    let tableInt = table.render({
            elem:"#Yiling-table",
            height:500,
            skin: 'line',
            size: 'sm', //小尺寸的表格
            title:"系统菜单",
        // data:"/AdminSystemApi/sysmeunlist",
            toolbar:"#toolbarDemo",
            url:"/Admin/AdminSystemApi/sysroleIduserlist",
            where:{"Id":TID},
            page:true, //开启分页
            cols: [[ //表头
                {type:"checkbox",width:80,fixed: 'left'}
                ,{field: 'Id', title: 'ID', width:80,fixed: 'left'}
                ,{field: 'loginname', title: '登陆账号', width:140}
                ,{field: 'name', title: '用户名称', width:140}
                ,{field: 'address', title: '地址', width:160} 
                ,{field: 'sex', title: '性别', width: 80,templet:'#SetSex'}
                ,{field: 'blocking', title: '用户状态', width: 80,templet:'#Setblocking'}
                ,{field: 'creationtime', title: '创建时间', width: 180,templet:"#SetDateCrete"}
                ,{title: '操作',templet:"#BarOper",fixed:"right",minWidth:120}
               
            ]],

        });  

        let ToolEditIndex = null;
        table.on("tool(Yiling-table)",function(obj){   //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data;   //获取当前数据
            
            if(obj.event == "tooldel"){

                layer.confirm('是否需要删除！', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function(index, layero){
                    //按钮【按钮一】的回调
                        // $.ajax({
                        //     type:"get",
                        //     url:"/AdminSystemApi/sysuserdelete",
                        //     data:{Id:data.Id},
                        //     dataType:"json",
                        //     success:function(result){
                        //         if(result.ErrorCode == 0){
                        //             layer.msg(result.ErrorMessage);
                        //             window.LoadTable();
                        //         }else{
                        //             layer.msg(result.ErrorMessage);
                        //         }
                        //     }
                        // })
                        layer.close(index)
                    }, function(index){
                    //按钮【按钮二】的回调
                        layer.close(index)
                    });
            }else if(obj.event == "tooledit"){
                
                ToolEditIndex = layer.open({
                                type:2,
                                content:"/Admin/AdminRouter/sysroleeditview?Id="+data.Id,
                                title:"角色编辑",
                                maxmin:true,
                                shadeClose:false,
                                area:["800px","600px"],
                                success:function(){
                                
                                }

                        })   
            }else if(obj.event == "toolauth"){

                layer.confirm('是否取消授权！', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function(index, layero){
                    //按钮【按钮一】的回调
                        new YI_Ajax().SetUrl("/Admin/AdminSystemApi/sysroleUserAuthdelete").SetType("GET").SetDataPara({roleId:TID,userId:data.Id}).Alone().Init(function(err,result){
                            if(err){
                                return;
                            }
                                window.LoadTable();
                        })
                        layer.close(index)
                    }, function(index){
                    //按钮【按钮二】的回调
                        layer.close(index)
                    });
              
            }
        });

          /**
         * 检索
         * **/
         form.on('submit(FormSearch)', function(data){
          // layer.msg(JSON.stringify(data.field));
            let obj = data.field;
            tableInt.reload({
                where:{Id:TID,userrole:obj}
            })
            return false;
        });


        let CloseSubmit = document.querySelector("#CloseSubmit");
        CloseSubmit.addEventListener("click",function(){
            window.LoadTable();
            return false;
        });


        table.on("toolbar(Yiling-table)",function(obj){
            let data = obj.data;
            let tabledata = table.checkStatus(obj.config.id);
    
            switch(obj.event){
                case "add":
                    OpenAdd();
                    break;
                case "Close":
                    ToClose();
                    break;
                case "AuthAll":
                    ToAuthAll(tabledata);
                    break;
            };
        });

        let AddIndex = null;        
        let OpenAdd = function () {
           AddIndex = layer.open({
                            type:2,
                            content:"/Admin/AdminRouter/sysroleuserselectaddview?Id="+TID,
                            title:"选择用户",
                            maxmin:true,
                            shadeClose:false,
                            area:["1000px","800px"],
                            success:function(){
                               
                            }

                      });     
        };

        /**
         * 批量取消授权
         * */
        let ToAuthAll = function (data) {

            if(data.data.length != 0){
                let strId = "";
                for(let i = 0;i<data.data.length;i++){
                    strId += data.data[i].Id + ","
                }
                strId = strId.substring(0,strId.length-1);
    
                layer.confirm('是否取消授权！', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function(index, layero){
                    //按钮【按钮一】的回调
                        new YI_Ajax().SetUrl("/Admin/AdminSystemApi/sysroleUserAuthdelete").SetType("GET").SetDataPara({roleId:TID,userId:strId}).Alone().Init(function(err,result){
                            if(err){
                                return;
                            }
                                window.LoadTable();
                        })
                        layer.close(index)
                    }, function(index){
                    //按钮【按钮二】的回调
                        layer.close(index)
                    });

            }else{
                layer.msg("请您先选中");
                return;
            }
        }

        /**
         * 关闭
         * */
        let ToClose = function(){
            parent.layui.admin.closeThisTabs();
        };

    //调用方法
    window.LoadTable = function (){
       
        tableInt.reload({
            where:{}
        })
    };
})
</script>







<script type="text/html" id="TypeBar">
    {{Setcartetype(d.cartetype)}}
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.createtime,"yyyy年MM月dd日 HH:mm:ss")}}
</script>

<script type="text/html" id="BarOper">
    {{BarOpertype(d)}}
</script>


<script type="text/html" id="Setblocking">
    {{toolSetblocking(d.blocking)}}
</script>

<script>

    function Setcartetype(value){
        if(value == 1){
            return '<button class="layui-btn layui-btn-xs Yliing-blue">目录</button>';
        }else if(value == 2){
            return '<button class="layui-btn layui-btn-xs Yiling-cyan">菜单</button>';
        }else if(value == 3){
            return '<button class="layui-btn layui-btn-xs Yiling-yellow">按钮</button>';
        }
    }

    function BarOpertype(){
        return `<div class="Barmore">
                    <button class="layui-btn layui-btn-xs Yiling-Red" lay-event="toolauth"><i class="layui-icon layui-icon-close"></i>取消授权</button>
                </div>`
    }

    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }

    function toolSetblocking(value) {
        if(value == 0){
            return '<a class="Yiling-a-xs Yiling-1ab394">正常</a>';
        }else{
            return '<a class="Yiling-a-xs Yiling-Red">异常</a>';
        }

    }
</script>


